<script setup>
import { computed, ref } from 'vue';
import {ElMessage, ElMessageBox, ElTable, ElTableColumn} from 'element-plus';
import { useCartStore } from '../stores/cart';
import {Cartinsert, Delete,GetCart} from "@/utils/config.js";
import  QRCode from 'qrcode'
const cartStore = useCartStore();
const centerDialogVisible = ref(false)
const CartList = ref({})
const getCartList = async ()=>{
  const res = await GetCart()
  CartList.value = res.data.rows
  console.log(CartList.value)
}
getCartList()
const text = ref("购买成功")
const qrImage = ref(null);
const makeQRCode = async () =>{
  console.log(qrImage.value)
  qrImage.value = await QRCode.toDataURL(text.value)
  console.log(qrImage.value)
}

const selectedItemIds = ref([]);

// 计算被勾选商品的总金额
const totalSelectedPrice = computed(() => {
  return cartStore.items
      .filter(item => selectedItemIds.value.includes(item.id))
      .reduce((total, item) => total + item.price * item.number, 0);
});


const handleSelectionChange = (val) => {
  selectedItemIds.value = val.map(item => item.id);
};

const handleToDelete = async (id) => {
  try {
    const res = await Delete(id);
    console.log(res);
    cartStore.removeItem(id);
    const index = selectedItemIds.value.indexOf(id);
    if (index > -1) {
      selectedItemIds.value.splice(index, 1);
    }
    await getCartList()
  } catch (error) {
    console.error('删除失败:', error);
  }
};

const handleCheckout = async () => {
  if (selectedItemIds.value.length === 0) {
    ElMessageBox.alert('请先选择商品');
    return;
  }
  await makeQRCode(); // 在检查完商品后生成二维码
  centerDialogVisible.value = true; // 显示对话框
  setTimeout(()=>{
    centerDialogVisible.value = false
    ElMessage.success('购买成功')
  },1000)
  console.log(selectedItemIds.value)
  await delete(selectedItemIds.value)
  getCartList()
};

const clearCart = () => {
  cartStore.clearCart();
  selectedItemIds.value = [];
};
</script>

<template>
<!--  <div class="null"></div>-->
  <div class="new">
    <el-table
        :data="CartList"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="productId" label="商品编号" width="180"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="200"></el-table-column>
      <el-table-column prop="price" label="价格" width="150"></el-table-column>
      <el-table-column prop="quantity" label="数量" width="120"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="danger" size="mini" @click="handleToDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="controls-container">
      <span><strong>总计金额：{{ totalSelectedPrice }}</strong></span>

<!--结算-->
      <el-button plain @click="handleCheckout" type="primary" class="btn">
        结算
      </el-button>

      <el-dialog
          v-model="centerDialogVisible"
          title="请扫码下单"
          width="500"
          align-center
      >
        <img :src="qrImage"/>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-button type="danger" @click="clearCart" class="btn1">清空购物车</el-button>
    </div>
  </div>
</template>
<style scoped>
.new {
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  height: 800px;
}
.null {
  background-color: #f5f5f5;
  height: 52px;
}
.controls-container{
  padding-top: 10px;
  padding-left: 20px;
}
.btn{
  margin-left: 610px;
}
.btn1{
  margin-left: 20px;
}
</style>
